<template>

    <a-drawer v-model:open="open" width="70%" :root-style="{ color: 'blue' }" style="color: red" :title="fileVo.fileName" 
    placement="right">



    <div class="vue-office-box">
 <vue-office-docx
            v-if="fileVo.fileExtension === 'docx'"
            :src="fileVo.previewUrl"
            style="width: 100%;height: 100%"
            @rendered="renderedHandler"
            @error="errorHandler"
        />
        <vue-office-excel
            v-else-if="fileVo.fileExtension === 'xlsx' || fileVo.fileExtension === 'xls'"
             :src="fileVo.previewUrl"
            :options="options"
            style="height: 72vh;width: 100%"
            @rendered="renderedHandler"
            @error="errorHandler"
        />
        <vue-office-pdf
            v-else-if="fileVo.fileExtension === 'pdf'"
            :options="{ lazy: false }"
          :src="fileVo.previewUrl"
            @rendered="renderedHandler"
            @error="errorHandler"
        /> 
        
    
        <div v-else>
            暂不支持该文件格式
        </div> 

</div>

    </a-drawer>
</template>

<script setup name="Preview">

import VueOfficeDocx from '@vue-office/docx'
import VueOfficeExcel from '@vue-office/excel'
import VueOfficePdf from '@vue-office/pdf'

 
import '@vue-office/docx/lib/index.css'
import '@vue-office/excel/lib/index.css'



//弹框的开关
const open = ref(false);
const fileVo = ref("");
//设置弹框的开闭 第一个参数是否是是新增  第二个参数是数据
const openModal =async (data)=>{
  fileVo.value = data;
  console.log(data)
  open.value = true;
  if(fileVo.fileExtension==="xlsx"){
    options.xls  = false;
  }
}

// const url = ref("http://static.shanhuxueyuan.com/test6.docx")
const options=reactive({
    xls: true,       //预览xlsx文件设为false；预览xls文件设为true
    minColLength: 0,  // excel最少渲染多少列，如果想实现xlsx文件内容有几列，就渲染几列，可以将此值设置为0.
    minRowLength: 0,  // excel最少渲染多少行，如果想实现根据xlsx实际函数渲染，可以将此值设置为0.
    widthOffset: 10,  //如果渲染出来的结果感觉单元格宽度不够，可以在默认渲染的列表宽度上再加 Npx宽
    heightOffset: 10, //在默认渲染的列表高度上再加 Npx高
    beforeTransformData: (workbookData) => {return workbookData}, //底层通过exceljs获取excel文件内容，通过该钩子函数，可以对获取的excel文件内容进行修改，比如某个单元格的数据显示不正确，可以在此自行修改每个单元格的value值。
    transformData: (workbookData) => {return workbookData}, //将获取到的excel数据进行处理之后且渲染到页面之前，可通过transformData对即将渲染的数据及样式进行修改，此时每个单元格的text值就是即将渲染到页面上的内容
 })

onMounted(() => {
	//console.log(uploaderRef.value, 'uploaderRef.value');
});

const renderedHandler=()=> {-
    console.log("渲染完成")
}
const errorHandler=(errorInfo)=> {
    console.log("渲染失败",errorInfo)
}



//在这里暴露这个方法 在外面调用
defineExpose({ openModal })

</script>

<style scoped>
 .vue-office-box{
    height: 100%;
    .vue-office-pdf {
      height: 100% !important;
    }
  }
</style>